<template>
  <div class="login-container">
    <div class="background-animation"></div>

    <div class="login-box fade-in-up">
      <div class="login-panel-left">
        <div class="brand-content">
          <div class="brand-logo">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round"
                d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
            </svg>
          </div>
          <h1 class="brand-title">智慧教师中心</h1>
          <p class="brand-subtitle">一个连接知识与未来的智能平台</p>
        </div>
        <div class="grid-background"></div>
      </div>

      <div class="login-panel-right">
        <div class="form-container">
          <h2 class="form-title">欢迎回来</h2>
          <p class="form-subtitle">请输入您的凭证以继续</p>
          <el-form :model="loginForm" ref="loginFormRef" :rules="rules" label-position="top">
            <el-form-item label="用户名" prop="username">
              <el-input size="large" v-model="loginForm.username" placeholder="请输入用户名">
                <template #prefix><el-icon class="input-icon">
                    <User />
                  </el-icon></template>
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input size="large" v-model="loginForm.password" type="password" placeholder="请输入密码" show-password>
                <template #prefix><el-icon class="input-icon">
                    <Lock />
                  </el-icon></template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="login-button" size="large" type="primary" @click="handleLogin" :loading="loading">
                {{ loading ? '登录中...' : '立即登录' }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useAuthStore } from '../stores/authStore';
import authService from '../services/authService';
import { User, Lock } from '@element-plus/icons-vue';

const router = useRouter();
const authStore = useAuthStore();
const loginFormRef = ref(null);
const loading = ref(false);

const loginForm = ref({
  username: '',
  password: '',
});

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
};

const handleLogin = async () => {
  if (!loginFormRef.value) return;
  await loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      try {
        const userData = await authService.login(loginForm.value);
        authStore.setUser(userData);

        ElMessage.success('登录成功');
        // 登录成功后跳转到教师工作台
        // ✅ 根据角色跳转不同的页面
        if (userData.role === '管理员') {
          router.push({ name: 'AdminDashboard' }); // 管理员主页路由
        } else if (userData.role === '教师') {
          router.push({ name: 'TeacherDashboard' }); // 教师主页路由
        } else {
          ElMessage.warning('未知角色，无法跳转页面');
        }
      } catch (error) {
        ElMessage.error(error.message || '登录失败，请检查用户名和密码');
      } finally {
        loading.value = false;
      }
    }
  });
};
</script>

<style scoped>
/* ========================================================= */
/* 主容器与背景，保持不变 */
/* ========================================================= */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at top left, var(--bg-soft-gradient-start) 0%, var(--bg-soft-gradient-end) 100%);
}

.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ========================================================= */
/* 全新分栏式登录框 .login-box */
/* ========================================================= */
.login-box {
  width: 960px;
  height: 600px;
  display: flex;
  border-radius: 24px;
  overflow: hidden;
  z-index: 1;
  background-color: var(--vt-c-white);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* ========================================================= */
/* 左侧品牌面板 .login-panel-left */
/* ========================================================= */
.login-panel-left {
  flex-basis: 45%;
  padding: 60px;
  color: var(--vt-c-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #1e293b;
  /* 深蓝灰色作为底色 */
  background: linear-gradient(160deg, #3b82f6 0%, #1e3a8a 100%);
  /* 优雅的蓝色渐变 */
}

.brand-content {
  position: relative;
  z-index: 2;
}

.brand-logo {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  margin-bottom: 24px;
}

.brand-logo svg {
  width: 32px;
  height: 32px;
}

.brand-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

.brand-subtitle {
  font-size: 1rem;
  font-weight: 300;
  opacity: 0.8;
}

/* 科技感背景网格动画 */
.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 1;
  animation: moveGrid 20s linear infinite;
}

@keyframes moveGrid {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -40px -40px;
  }
}

/* ========================================================= */
/* 右侧表单面板 .login-panel-right */
/* ========================================================= */
.login-panel-right {
  flex-basis: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
}

.form-container {
  width: 100%;
  max-width: 360px;
}

.form-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--vt-c-text-1);
  margin-bottom: 8px;
}

.form-subtitle {
  font-size: 1rem;
  color: var(--vt-c-text-2);
  margin-bottom: 32px;
}

:deep(.el-form-item__label) {
  color: var(--vt-c-text-1);
  font-weight: 600;
}

/* 输入框样式重塑 */
:deep(.el-input__wrapper) {
  border-radius: 12px !important;
  padding: 6px 15px !important;
  /* 调整内边距适应 large size */
  background-color: #f8fafc !important;
  box-shadow: none !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.2s ease-in-out;
}

:deep(.el-input__wrapper.is-focus) {
  background-color: #fff !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
}

.input-icon {
  font-size: 16px;
  color: #94a3b8;
}

/* 登录按钮样式重塑 */
.login-button {
  width: 100%;
  margin-top: 20px;
  height: 50px;
  border-radius: 12px !important;
  background: var(--color-primary) !important;
  box-shadow: 0 4px 14px 0 rgba(var(--color-primary-rgb), 0.3) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: white !important;
  border: none !important;
  transition: all 0.3s ease !important;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px 0 rgba(var(--color-primary-rgb), 0.35) !important;
  background: var(--color-primary-light) !important;
}

/* 确保按钮内的 span 继承样式，防止文字不显示 (继承自之前的修复) */
.login-button :deep(span) {
  color: white !important;
}
</style>